<template>
	<view class="main">
		<view class="mapView">
			<map style="width: 100%; height: 700rpx;" :latitude="latitude" :longitude="longitude" :markers="covers" :enable-zoom="true"	></map>
		</view>
		<scroll-view scroll-y="true" >
			<view class="menuItem" v-for="(item,index) in covers" :key="index">
				<view class="title" @click="showLocation(item.latitude,item.longitude)">
					<view class="name">{{item.title}}</view>
					<view class="distence">据您{{item.distence}}</view>
				</view>
				<view class="clickTo" @click="navTo(item.latitude,item.longitude)">导航</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude:'',
				longitude:'',
				covers:[
					{
						id:1,
						title:'厕所1',
					    latitude: 39.9091,
					    longitude: 116.391,
					    iconPath: '../../static/static/iconCesuo.png'
					}, {
						id:2,
						title:'厕所2',
					    latitude: 39.9092,
					    longitude: 116.392,
					    iconPath: '../../static/static/iconCesuo.png'
					}, {
						id:3,
						title:'厕所3',
					    latitude: 39.9093,
					    longitude: 116.393,
					    iconPath: '../../static/static/iconCesuo.png'
					}, {
						id:4,
						title:'厕所4',
					    latitude: 39.9094,
					    longitude: 116.394,
					    iconPath: '../../static/static/iconCesuo.png'
					}, {
						id:5,
						title:'厕所5',
					    latitude: 39.9094,
					    longitude: 116.394,
					    iconPath: '../../static/static/iconCesuo.png'
					}, {
						id:6,
						title:'厕所6',
					    latitude: 39.9094,
					    longitude: 116.394,
					    iconPath: '../../static/static/iconCesuo.png'
					}
				],
			}
		},
		methods:{
			showLocation(lat,lon){
				this.latitude=lat;
				this.longitude=lon;
			},
			navTo(lat,lon){
				console.log(lat,lon,typeof(lat),typeof(lon))
				wx.openLocation({//​使用微信内置地图查看位置。
				     latitude: lat,//要去的纬度-地址
				     longitude: lon,//要去的经度-地址
				})
			},
			computedDistence(){
				let _this=this;
				this.covers.forEach((item,index)=>{
					let juli=_this.distance(_this.latitude,_this.longitude,item.latitude,item.longitude);
					item.distence=juli;
				})
			},
			distance(la1, lo1, la2, lo2) {  
			    var La1 = la1 * Math.PI / 180.0;  
			    var La2 = la2 * Math.PI / 180.0;  
			    var La3 = La1 - La2;  
			    var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;  
			    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2)+Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));  
			    s = s * 6378.137;//地球半径  
			    s = Math.round(s * 10000);  
				if(s>1000){
					s = (s/10000).toFixed(2)+'km';
				}else{
					s = s.toFixed(2)+'m';
				}
				return s;
			}
		},
		onLoad(option) {
			const userLocation=uni.getStorageSync('userLocation');
			const arr=userLocation.split(',')
			this.latitude=Number(arr[1]);
			this.longitude=Number(arr[0]);
			this.computedDistence();
			console.log('1214',userLocation,arr)
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 100%;
		scroll-view{
			height: calc(100vh - 700rpx);
			.menuItem{
				height: 150rpx;
				border-bottom: 1rpx solid #f5f5f5;
				padding: 20rpx 20rpx 20rpx 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.title{
					width: 550rpx;
				}
				.name{
					font-size: 600;
				}
				.distence{
					font-size: 24rpx;
					color: #666;
					margin-top: 20rpx;
				}
				.clickTo{
					border: 1rpx solid #f5f5f5;
					font-size: 30rpx;
					width: 130rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: 30rpx;
					color: #666;
				}
			}
		}
	}
</style>
